<script setup lang="ts">
import { getDataFn } from "@/api/getPro";
import { ref,type Ref ,onMounted} from "vue";
import HeaderCom from "../../components/header/HeaderCom.vue";

const proList:Ref<any[]> = ref([])
const proListSeaFood:Ref<any[]> = ref([])
const active:Ref<number> = ref(0)

function kindClick(id:number){
    console.log(id);   
}

onMounted(() => {
  getDataFn().then(res => {
    console.log(res);
    proList.value = res
    console.log(proList.value);

    proListSeaFood.value = res.filter(item => item.category =='海鲜' || item.category =='烧烤' || item.category =='甜点')
  })
})
</script>
<template>
    <main>
        <!-- <header> <van-icon  @click="$router.go(-1)" name="arrow-left"/><h3>全部分类</h3></header> -->
        <HeaderCom isshow title="全部分类"></HeaderCom>
        <section>
    <div class="left">
  <van-sidebar v-model="active">
  <van-sidebar-item title="商店超市" style="color:gray" />
  <van-sidebar-item @click="kindClick(kind.id)" v-for="kind in proList" :title="kind.category" style="color:gray" />
</van-sidebar>
</div>

<div class="right">
    <div>
      <!-- 分割线 -->
      <van-divider  :style="{ color: 'black', borderColor: 'gray',}">商店超市</van-divider> 
      <!-- <hr> -->
<van-grid :column-num="3" :border="false">
    <van-grid-item @click="$router.push('/kindfood')" icon="star-o" icon-color="#f7b731" icon-size="45" text="全部" />
  <van-grid-item @click="$router.push('/kindfood')" v-for="item in proListSeaFood" :key="item.id" :text="item.category">
    <template #icon>
       <p :style="{background:item.color,width:'35px',height:'35px',borderRadius:'50%',opacity:0.3}"></p>
    </template>
    </van-grid-item>
</van-grid>
</div>

<div>
<h3>海鲜</h3><hr>
<van-grid :column-num="3" :border="false">
    <van-grid-item @click="$router.push('/kindfood')" icon="star-o" icon-color="#f7b731" icon-size="45" text="全部" />
  <van-grid-item @click="$router.push('/kindfood')" v-for="item in proListSeaFood" :key="item.id" :text="item.category">
    <template #icon>
       <p :style="{background:item.color,width:'35px',height:'35px',borderRadius:'50%',opacity:0.3}"></p>
    </template>
    </van-grid-item>
</van-grid>
</div>

<div>
<h3>面食</h3><hr>
<van-grid :column-num="3" :border="false">
    <van-grid-item @click="$router.push('/kindfood')" icon="star-o" icon-color="#f7b731" icon-size="45" text="全部" />
  <van-grid-item @click="$router.push('/kindfood')" v-for="item in proListSeaFood" :key="item.id" :text="item.category">
    <template #icon>
       <p :style="{background:item.color,width:'35px',height:'35px',borderRadius:'50%',opacity:0.3}"></p>
    </template>
    </van-grid-item>
</van-grid>
</div>

</div>
 </section>
    </main>
  
  
  </template>

  <style lang="scss" scoped>

*{
    margin: 0;
    // padding: 0;
    box-sizing: border-box;
  }

section{
    display: flex;
    
}

.left{
    width: 100px;
}

  // header{
  //   display: flex;
  //   justify-content: center;
  //   height: 80px;
  //   align-items: center;
  // }

  // .van-icon{
  //    position: relative;
  //    right: 140px;
  //    font-size: 18px;
  // }

 
</style>